<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="../plugin/element-ui/index.css">
  <link rel="stylesheet" href="../style/addEmployee.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="addEmployee_app">
    <div>{{titleFlag?"添加用户":"修改用户"}}</div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话">
        <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input type="text" v-model.number="ruleForm.idNumber"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>



  </div>
  <script src="../plugin/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugin/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../plugin/axios/axios.min.js"></script>
  <script src="../js/employee.js"></script>
<script>
  let app = new Vue({
    el:"#addEmployee_app",
    data() {
      var validateUsername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        setTimeout(() => {
            if (value.length < 3) {
              callback(new Error('账号长度为6-10位'));
            }else if(value.length>10){
              callback(new Error('账号长度为6-10位'));
            }else {
              callback();
            }
        }, 1000);
      };
      return {
        ruleForm: {
          username:'',
          password:'',
          name:'',
          sex:0,
          phone:'',
          idNumber:''
        },
        titleFlag:true,
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ]
        }
      };
    },
    created(){
      let id=requestUrlParam()
      if(id){
          this.init(id)
      }

    },
    methods: {
      async init(id){
          this.titleFlag = false
          let res =await getEmployeeInfo(id)
          this.ruleForm = res.data.data
      },
     async submitForm(formName) {
        if(this.titleFlag){
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              let res = await addEmployee(this.ruleForm)
              console.log(res)
              if(res.data.code==1){
                this.FormData=[]
                window.location.href="../page/employee.html"
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              }else if(res.data.code==0){
                this.$message.error(res.data.msg)
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }else{
          let res = await EditEmployee(this.ruleForm)
          console.log(res)
          if(res.data.code==1){
            window.location.href="../page/employee.html"
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          }
          else{
            this.$message.error(res.data.msg)
          }

        }

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  })
</script>
</body>
</html>